<template>
	<view class="hot-section">
		<view v-for="(item, index) in productList" :key="index" class="guess-item" @click="navToDetailPage(item)">
			<view class="image-wrapper">
				<image :src="item.pic" mode="aspectFill"></image>
			</view>
			<view class="txt">
				<text class="title clamp">{{item.name}}</text>
				<text class="title2">{{item.subTitle}}</text>
				<text class="price">￥{{item.price}}</text>
				<view class="selector-wrapper">
					<uni-number-box class="step" :min="1" :max="100" :value="item.quantity"
						:index="index" @eventChange="numberChange" />
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box.vue';
	export default {
		name: "product-list-row",
		components: {
			uniNumberBox,
		},
		data() {
			return {

			};
		},
		props: {
			productList: Array,
		},
		methods: {
			//监听image加载完成
			onImageLoad(key, index) {
				this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(key, index) {
				this[key][index].productPic = '/static/errorImage.jpg';
			},		
			//商品详情页
			navToDetailPage(item) {
				let id = item.id;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hot-section {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
		background: #fff;
		position: relative;

		.guess-item {
			display: flex;
			flex-direction: row;
			width: 100%;
			padding-bottom: 40upx;
		}

		.image-wrapper {
			width: 30%;
			height: 250upx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.title {
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80upx;
		}

		.title2 {
			font-size: $font-sm;
			color: $font-color-light;
			line-height: 40upx;
			height: 80upx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: block;
		}

		.price {
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 80upx;
		}

		.txt {
			position: relative;
			width: 70%;
			display: flex;
			flex-direction: column;
			padding-left: 40upx;
		}

		.uni-numbox {
			position: absolute !important;
			left: auto !important;
			right: 0;
		}
	}
</style>